<script>
export default {
  name: 'Login'
}
</script>
<script setup>
import { reactive, ref, watch } from 'vue'
import useLoginStore from '@/store/user/index.js'
import { getLocalStore, removeLocalStore, setLocalStore } from '@/utils/localUser.js'
import { PASSWORD, USERNAME } from '@/utils/const.js'

const loginStore = useLoginStore()
loginStore.getLoginCodeImageAction()

const loginParams = reactive({
  userName: '',
  password: '',
  code: '',
  sessionId: ''
})

//是否记住账号
const isRemember = ref(false)

// 登录页表单校验
const rules = reactive({
  userName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur'
    }
  ],
  code: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur'
    }
  ]
})

//登录form
const loginRef = ref()

//验证码刷新
const changeCheckCode = () => {
  loginStore.getLoginCodeImageAction()
}

//加载页面刷新时
if (getLocalStore(USERNAME) && getLocalStore(PASSWORD)) {
  //设置记住密码
  isRemember.value = true
  //设置登录页面吗数据
  loginParams.userName = getLocalStore(USERNAME)
  loginParams.password = getLocalStore(PASSWORD)
}

//登录
const loginBtn = async () => {
  //校验表单
  await loginRef.value.validate()
  loginParams.sessionId = loginStore.codeImage.sessionId
  console.log(loginParams)
  await loginStore.loginAction(loginParams)
  //记住密码存储页面信息
  if (isRemember.value) {
    setLocalStore(USERNAME, loginParams.userName)
    setLocalStore(PASSWORD, loginParams.password)
  } else {
    removeLocalStore(USERNAME)
    removeLocalStore(PASSWORD)
  }
}
</script>

<template>
  <div class="login">
    <div class="card">
      <el-card style="width: 400px">
        <h3 class="title">后台管理系统</h3>
        <el-form ref="loginRef" :rules="rules" :model="loginParams" label-width="auto">
          <el-form-item prop="userName">
            <el-input v-model="loginParams.userName" prefix-icon="UserFilled" placeholder="账号" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
                type="password"
                show-password
                v-model="loginParams.password"
                prefix-icon="Lock"
                placeholder="密码"
            />
          </el-form-item>
          <el-form-item class="check" prop="code">
            <el-input v-model="loginParams.code" placeholder="验证码">
              <template #prefix>
                <el-icon>
                  <svg
                      t="1715612369030"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="4496"
                      width="16"
                      height="16"
                  >
                    <path
                        d="M513.3 958.5c-142.2 0-397.9-222.1-401.6-440.5V268c1.7-39.6 31.7-72.3 71.1-77.3 49-4.6 97.1-16.5 142.7-35.3 47.8-14 91.9-38.3 129.4-71.1 30.3-24.4 72.9-26.3 105.3-4.6 39.9 30.7 83.8 55.9 130.5 74.6 48.6 14.7 98.2 25.9 148.4 33.7 38.5 7.6 67.1 40.3 69.5 79.5 3.3 84.9 2.5 169.9-2.6 254.7-33.7 281.6-253.7 436.4-392.7 436.3z m-0.1-813.7c-7.2-0.2-14.3 2-20 6.4-39.7 35.2-86.8 61.1-137.7 75.7-46.8 19.2-96.2 31-146.6 35.2-11 3.2-18.8 13-19.5 24.4v230.1c3.5 180.3 223.3 361 323.9 361s287.3-120.2 317.6-360.5c7.3-142.7 0-228.6 0-229.6-1.3-13.3-11-24.3-24-27.3-49.6-7.7-98.6-19-146.5-33.7-46.3-19.5-89.7-45.3-129-76.7-5.8-3.8-12.7-5.5-19.5-4.9l1.3-0.1z"
                        fill="#C6CCDA"
                        p-id="4497"
                    ></path>
                    <path
                        d="M750.1 428L490.7 673.2c-11.7 11.1-29.5 12.9-43.1 4.2l-6.8-5.8-141.2-149.4c-9.3-9.3-12.7-22.9-9-35.5 3.8-12.6 14.1-22.1 27-24.8 12.9-2.7 26.1 1.9 34.6 11.9L469 597.5l233.7-221c14.6-12.8 36.8-11.6 49.9 2.7 13.2 14.2 11.5 35.3-2.5 48.8"
                        fill="#C6CCDA"
                        p-id="4498"
                    ></path>
                  </svg>
                </el-icon>
              </template>
            </el-input>
            <div class="code-image" @click="changeCheckCode">
              <img :src="`data:image/png;base64,${loginStore.codeImage.imageData}`" />
            </div>
          </el-form-item>
          <el-form-item class="choose">
            <el-checkbox
                v-model="isRemember"
                label="记住密码"
                size="large"
                @click="rememberPasswordBtn"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="loginBtn">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<style scoped lang="less">
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: url('@/assets/images/login-background.jpg') center;
  background-size: cover;

  .card {
    .title {
      text-align: center;
      font-weight: normal;
      color: #707070;
      margin-bottom: 30px;
    }
  }

  .check {
    .el-input {
      width: 220px;
      margin-right: 20px;
    }

    .code-image {
      img {
        width: 120px;
        height: 30px;
      }
    }
  }
}
</style>
